{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">账号安全</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#resetpwd">修改密码</a></li>
                            <li><a href="#log">登录历史</a></li>
                        </ul>

                        <div id="tabcontent" class="tab-content">

                            <div id="resetpwd" class="tab-pane active">
                                <div class="col-sm-10">
                                    <form method="post" id="userForm" class="form-horizontal" action="">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">姓名<span
                                                    class="text-red">*</span>：</label>
                                            <div class="col-sm-8">
                                                <input id="name" name="name" placeholder="Name" type="text"
                                                       class="form-control"
                                                       value="{{ user.name }}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-4 col-sm-offset-2">
                                                <button class="btn btn-white" type="reset">取消</button>
                                                <button id="submit_button" class="btn btn-primary" type="submit">确认保存
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="log" class="tab-pane">
                                b
                            </div>

                        </div>

                    </div>
                    <!-- /.row -->
                </div>
                <!-- ./box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
{% endblock %}

{% block scripts %}
    <script src="/static/plugins/nice-validator/jquery.validator.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/nice-validator/jquery.validator.css">
    <script>
        $('#userForm').validator({
            timely: 2,
            theme: "yellow_right_effect",
            fields: {
                "name": {
                    rule: "required",
                    tip: "姓名",
                    ok: "",
                    msg: {required: "必须填写"}
                },
                "email": {
                    rule: "required",
                    tip: "Email",
                    ok: "",
                    msg: {required: "必须填写"}
                }
            },
            valid: function (form) {
                form.submit();
            }
        });

        $(function () {
            $('#myTab a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            });

        });
    </script>

{% endblock %}